<template>
  <div class="home">
    <!-- 首页头部 -->
    <headerTop title="昌平区北七家宏福科技园">
      <span class="header_search" slot="left">
        <i class="iconfont icon-sousuo"></i>
      </span>
      <span class="header_login" slot="right">
        <span class="header_login_text">登录|注册</span>
      </span>
    </headerTop>
    <!-- 首页导航 -->
    <nav class="home_nav">
      <a href="javascript:" class="link_to_food">
        <div class="food_container">
          <img src="./images/food.png" />
          <span>甜品饮品</span>
        </div>
      </a>
      <a href="javascript:" class="link_to_food">
        <div class="food_container">
          <img src="./images/food.png" />
          <span>商超便利</span>
        </div>
      </a>
      <a href="javascript:" class="link_to_food">
        <div class="food_container">
          <img src="./images/food.png" />
          <span>美食</span>
        </div>
      </a>
      <a href="javascript:" class="link_to_food">
        <div class="food_container">
          <img src="./images/food.png" />
          <span>简餐</span>
        </div>
      </a>
      <a href="javascript:" class="link_to_food">
        <div class="food_container">
          <img src="./images/food.png" />
          <span>新店特惠</span>
        </div>
      </a>
      <a href="javascript:" class="link_to_food">
        <div class="food_container">
          <img src="./images/food.png" />
          <span>准时达</span>
        </div>
      </a>
      <a href="javascript:" class="link_to_food">
        <div class="food_container">
          <img src="./images/food.png" />
          <span>预定早餐</span>
        </div>
      </a>
      <a href="javascript:" class="link_to_food">
        <div class="food_container">
          <img src="./images/food.png" />
          <span>土豪推荐</span>
        </div>
      </a>
    </nav>
    <!-- 首页附近商家 -->
    <div class="home_shop_list">
      <div class="shop_header">
        <i class="iconfont icon-option"></i>
        <span class="shop_header_title">附近商家</span>
      </div>
      <ShopList></ShopList>
    </div>
  </div>
</template>
<script>
import HeaderTop from '../../components/HeaderTop'
import ShopList from '../../components/ShopList/ShopList'
export default {
  components: {
    HeaderTop,
    ShopList
  }
}
</script>
<style lang="scss">
.home {
  width: 100%;
  .home_nav {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    .link_to_food {
      display: flex;
      flex: 1;
      text-align: center;
    }
  }
  .home_shop_list {
    .shop_header {
      padding:10px 10px 0;
      .icon-option{
        margin-left:5px;
        color:#999
      }
      .shop_header_title{
        color:#999;
        font-size:14px;
        line-height:20px;
      }
    }
  }
}
</style>
